<template>
    <div class="container containerUser">
        <!-- header -->
        <div class="header">
            <p class="header-title">选择学校</p>
            <el-select
                v-model="school"
                filterable
                placeholder="请选择"
                size="small"
                @change="getTableData(1)"
            >
                <el-option
                    v-for="item in optionSchool"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
            <div class="header-right">
                <p class="header-title">状态</p>
                <el-select
                    v-model="status"
                    filterable
                    placeholder="请选择"
                    size="small"
                    clearable
                    @change="getTableData(1)"
                >
                    <el-option
                        v-for="item in optionStatus"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
            <p class="header-title">用户</p>
            <el-input
                v-model="keyword_student_id"
                placeholder="请输入用户ID或手机号"
                suffix-icon="el-icon-search"
                size="small"
                clearable
                style="width:174px"
                @change="getTableData(1)"
                @keyup.native.enter="getTableData(1)"
            />
        </div>
        <!-- /header -->

        <!-- table -->
        <el-table
            :data="tableData"
            height="100%"
            style="width: 100%;"
            border
        >
            <el-table-column
                label="序号"
                width="100px"
                type="index"
                align="center"
            />
            <el-table-column
                prop="student_no"
                label="用户ID"
                width="160px"
                show-overflow-tooltip
                :formatter="emptyFormatter"
            />
            <el-table-column
                prop="true_name"
                label="用户姓名"
                show-overflow-tooltip
                :formatter="emptyFormatter"
            />
            <el-table-column
                prop="city_name"
                label="IP地址"
                width="100px"
                show-overflow-tooltip
                :formatter="emptyFormatter"
            >
                <template slot-scope="scope">
                    <span>{{ scope.row.province_name }}-{{ scope.row.city_name }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="phone"
                label="手机号"
                width="130px"
                show-overflow-tooltip
            />
            <el-table-column
                prop="school_name"
                label="学校名称"
                width="200px"
                show-overflow-tooltip
                :formatter="emptyFormatter"
            >
                <template slot-scope="scope">
                    <div class="school-wrap">
                        {{ scope.row.school_name }}
                        <!-- <span class="school-spliter" />
                        <el-button
                            type="text"
                            class="btn-school"
                            @click="fnEditSchool(scope.row)"
                        >
                            <i class="el-icon-edit" />
                        </el-button> -->
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="college_name"
                label="学院名称"
                show-overflow-tooltip
                width="130px"
                :formatter="emptyFormatter"
            />
            <el-table-column
                prop="exam_score"
                label="答题分数"
                show-overflow-tooltip
                :formatter="emptyFormatter"
            />
            <el-table-column
                prop="post_count"
                label="动态数量"
                show-overflow-tooltip
                :formatter="emptyFormatter"
            />
            <el-table-column
                prop="view_count"
                label="访问量-关注量-粉丝量"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                width="200"
            >
                <template slot-scope="scope">
                    <span>{{ scope.row.view_count }}-{{ scope.row.follow_count }}-{{ scope.row.fans_count }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="reg_time"
                label="注册时间"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                width="150px"
            >
                <template slot-scope="scope">
                    <span>{{ scope.row.reg_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="forbid"
                label="状态"
                width="130px"
                show-overflow-tooltip
                :formatter="emptyFormatter"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.forbid == 0">正常</span>
                    <span v-if="scope.row.forbid == 1 && scope.row.forbid_time !== 0">禁言至{{ scope.row.forbid_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</span>
                    <span v-if="scope.row.forbid == 1 && scope.row.forbid_time == 0">禁言至永久</span>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                fixed="right"
            >
                <template slot-scope="scope">
                    <span
                        class="curse-forb"
                        @click="fnForbidden(scope.row)"
                        v-if="scope.row.forbid === 1"
                    >取消禁言</span>
                    <span
                        class="curse-forb"
                        @click="fnForbidden(scope.row)"
                        v-if="scope.row.forbid === 0"
                    >禁言</span>
                    <el-button
                        type="text"
                        @click="fnLabel(scope.row)">打标签</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- /table -->

        <!-- 打标签 -->
        <el-dialog
            :visible.sync="mergeDialogVisible"
            center
            :before-close="fnBeforeColse"
        >
            <div class="content-dialog">
                <el-select
                    v-model="label"
                    filterable
                    placeholder="创建或者搜索标签"
                    class="label-input"
                    :allow-create="true"
                    default-first-option
                    @focus="fnClearLabel"
                    ref="labelClear"
                    @change="handleLabelSelect"
                    @keyup.native.enter="handleLabelEnter"
                >
                    <el-option
                        v-for="item in restaurants"
                        :key="item.tag_no"
                        :label="item.name"
                        :value="item"
                    />
                </el-select>
                <div class="label">
                    <el-tag
                        v-for="(tag,index) in labelList"
                        :key="index"
                        closable
                        :disable-transitions="false"
                        @close="handleClose(tag,index)"
                    >
                        {{ tag }}
                    </el-tag>
                </div>
                <div class="label-default">
                    <div
                        v-for="(item,index) in defaultLabel"
                        :key="index"
                    >
                        <div
                            class="label-cont"
                            v-if="item['tag_list'].length == 0 ? false : true "
                        >
                            <p class="label-title">{{ item.group_name }}</p>
                            <p
                                class="label-refresh"
                                @click="fnlabelRefresh(item.group_no)"
                            >
                                <i class="el-icon-refresh-right"/>
                                <span style="margin-right:15px">换一批</span>
                            </p>
                        </div>
                        <el-tag
                            v-for="(tag,idx) in item['tag_list']"
                            :key="idx"
                            type="info"
                            :disable-transitions="false"
                            @click="fnGetLabel(tag)"
                        >
                            {{ tag.name }}
                        </el-tag>
                    </div>
                </div>
                <p
                    class="label-tips"
                    v-if="isLabel"
                >暂无内容</p>
                <span
                    slot="footer"
                    class="dialog-footer"
                >
                    <el-button
                        size="small"
                        @click="fnLabelCancel">取 消</el-button>
                    <el-button
                        type="primary"
                        size="small"
                        @click="submitFormMerge">确 定</el-button>
                </span>
            </div>
        </el-dialog>
        <!-- /打标签 -->

        <!-- 新建标签弹窗 -->
        <el-dialog
            :visible.sync="centerDialogVisible"
            width="660px"
            height="400px !important"
            center
        >
            <el-form
                :model="ruleFormLabel"
                :rules="rulesLabel"
                ref="ruleFormLabel"
                label-width="100px"
                class="demo-ruleForm"
            >
                <el-form-item
                    label="选择类型"
                    prop="type"
                >
                    <el-button
                        :type="ruleFormLabel['type'] == 1 ? 'primary' : '' "
                        size="small"
                        class="header-label"
                        @click="fnSelectType('user')"
                    >用户</el-button>
                    <el-button
                        :type="ruleFormLabel['type'] == 1 ? '' : 'primary' "
                        size="small"
                        class="header-label"
                        :disabled="true"
                        @click="fnSelectType('shop')"
                    >商品</el-button>
                </el-form-item>
                <el-form-item
                    label="选择分类"
                    prop="label"
                    ref='labelType'
                >
                    <el-select
                        v-model="ruleFormLabel.label"
                        filterable
                        placeholder="请选择"
                        @change="handleSelectLabel"
                        :style="{width:'100%'}"
                    >
                        <el-option
                            v-for="item in ificationLabelList"
                            :key="item.group_no"
                            :label="item.name"
                            :value="item.group_no"
                        />
                    </el-select>
                </el-form-item>

                <el-form-item
                    label="新建标签"
                    prop="tag"
                >
                    <el-input
                        v-model="ruleFormLabel.tag"
                        size="small"
                    />
                </el-form-item>
            </el-form>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    size="small"
                    @click="centerDialogVisible = false">取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="submitFormLabel('ruleFormLabel')">保 存</el-button>
            </span>
        </el-dialog>
        <!-- 新建/编辑弹窗 -->

        <!-- dialog -->
        <!-- <el-dialog
            title="编辑学校名称"
            width="430px"
            custom-class="schedule-dialog"
            :visible.sync="showEditDialog"
        >
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleEditForm"
            >
                <el-form-item
                    prop='school_name'
                    label="学校名称"
                >
                    <el-select
                        v-model="ruleForm.school_name"
                        placeholder="请选择"
                        filterable
                        class="schoolIpt"
                    >
                        <el-option
                            v-for="item in schoolList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"/>
                    </el-select>
                </el-form-item>
            </el-form>
            <div
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    size="small"
                    type="primary"
                    @click="submitEditForm('ruleEditForm')">提交</el-button>
            </div>
        </el-dialog> -->
        <!-- dialog -->

        <!-- dialog -->
        <el-dialog
            title="请选择禁言时间"
            width="530px"
            custom-class="schedule-dialog"
            :visible.sync="showForbidden"
            center
        >
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForbidden"
            >
                <el-form-item
                    prop='forbidden_time'
                >
                    <el-radio-group v-model="ruleForm.forbidden_time">
                        <el-radio label="1">1天</el-radio>
                        <el-radio label="2">2天</el-radio>
                        <el-radio label="3">3天</el-radio>
                        <el-radio label="7">7天</el-radio>
                        <el-radio label="0">永久禁言</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    size="small"
                    type="primary"
                    @click="submitForbidden('ruleForbidden')">确定</el-button>
            </div>
        </el-dialog>
        <!-- dialog -->

        <!-- 分页 -->
        <div
            class="pagination-wrapper clearfix"
            v-if="tableData.length > 0"
        >
            <el-pagination
                background
                layout="total, prev, pager, next"
                :current-page.sync="page.now_page"
                :total="page.total_count"
                :page-size="page.page_size"
                @current-change="getTableData"
            />
        </div>
        <!-- /分页 -->
    </div>
</template>

<script>
export default {
    data () {
        return {
            ifEnter: true,
            labelTagList: [],
            ificationLabelList: [],
            target_no: '',
            isLabel: true,
            restaurantsLabel: [],
            results: '',
            labelList: [],
            label: '',
            restaurants: [],
            searchLabelList: [],
            defaultLabel: [],
            centerDialogVisible: false,
            ruleFormLabel: {
                type: 1,
                label: '',
                tag: ''
            },
            rulesLabel: {
                label: [
                    { required: true, message: '请选择分类,不可以为空', trigger: 'blur' }
                ],
                tag: [
                    { required: true, message: '请填写标签,不可以为空', trigger: 'blur' }
                ]
            },
            mergeDialogVisible: false,
            keyword_student_id: '',
            school: '',
            status: '',
            optionSchool: [{
                value: '',
                label: '全部'
            }],
            optionStatus: [{
                value: '',
                label: '全部'
            },{
                value: '0',
                label: '未禁言'
            },{
                value: '1',
                label: '已禁言'
            }],
            schoolList: [],
            tableData: [],
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            showEditDialog: false,
            showForbidden: false,
            ruleForm: {
                school_name: '',
                forbidden_time: ''
            },
            forbidList: {
                student_no: '',
                forbid: ''
            },
            changeStudent: {
                student_no: ''
            },
            school_id: '',
            forumList: [],
            forum_no: '',
            rules: {
                school_name: [
                    { required: true, message: '请选择学校名称', trigger: 'blur' }
                ],
                forbidden_time: [
                    { required: true, message: '请选择禁言时间', trigger: 'blur' }
                ]
            }
        };
    },
    created () {
        const arg = this.$route.query;

        if (arg['content'] !== 'undefined' || arg['content'] !== undefined) {
            this.tel = arg['content'];
        }

        this.setHeader();
        this.getSchoolList();
        this.getTableData();

    },
    watch: {
        centerDialogVisible (val) {
            if (!val) {
                this.ruleFormLabel = {
                    type: 1,
                    label: '',
                    tag: ''
                };
            }
        },
        mergeDialogVisible (val) {
            if (!val) {
                this.labelList = [];
                this.labelTagList = [];
                this.label = '';
            }
        }
    },
    filters: {
        setSchool (val) {
            if (val.length > 7) {
                return val.slice(0,7) + '...';
            } else {
                return val;
            }
        }
    },
    methods: {
        /**
         * 打标签
         */
        fnLabel (row) {
            this.target_no = row.student_no;
            this.mergeDialogVisible = !this.mergeDialogVisible;
            this.restaurants = [];
            this.fnLabelList();
            this.fnGetDefaultLabel('');
            this.fnGetLabelList();
        },

        /**
         * 获取标签列表/筛选
         */
        fnLabelList () {
            this.$post('/student/tag%5Cget_simple_list', {
                target_type: 1,
                keyword: '',
                group_no: ''
            }, resp=> {
                if (resp.code == 1) {
                    if (resp.data.list.length > 0) {
                        this.restaurants = resp.data.list;
                    }
                }
            });
        },

        /**
         * 获取被打标签
         */
        fnGetLabelList () {
            this.$post('/student/tag%5Cget_item_tag_list', {
                target_type: 1,
                target_no: this.target_no
            }, resp=> {
                if (resp.code == 1) {
                    if (resp.data.list.length > 0) {
                        resp.data.list.map(item=>{
                            this.labelList.push(item.name);
                            this.labelTagList.push({
                                name: item.name,
                                tag_no: item.tag_no
                            });
                        });
                    }
                }
            });
        },

        /**
         * 获取默认推荐标签/换一批
         */
        fnGetDefaultLabel (group_no) {
            this.$post('/student/tag%5Cget_simple_group_tag_list', {
                target_type: 1,
                group_tag_count: 20,
                group_no: group_no
            }, resp => {
                if (resp.code == 1 && resp.data.list.length > 0) {
                    this.isLabel = false;
                    if (group_no == '') { //默认
                        this.defaultLabel = resp.data.list;
                    } else if (group_no !== '') { //刷新数据用

                        this.defaultLabel.map((item,index)=>{
                            if(item.group_no == group_no) {
                                this.defaultLabel.splice(index, 1, resp.data.list[0]);
                            }
                        });
                    }
                }
            });
        },

        /**
         * 换一批
         */
        fnlabelRefresh (item) {
            this.fnGetDefaultLabel(item);
        },

        fnClearLabel () {
            this.label = '';
        },

        //选择联想数据，打标签
        handleLabelSelect(item) {
            if (typeof(item) == 'object') {
                this.labelTagList.push(this.label);
                this.label = this.label.name;
                this.labelList.push(this.label);
                setTimeout(()=>{
                    this.$refs.labelClear.blur();
                },30);
            } else {
                this.label = item;
            }
        },

        /**
         * 确定添加商品标签
         */
        submitFormMerge() {
            let str = '';

            if (this.labelTagList.length > 0) {
                this.labelTagList.map(item=>{
                    str += item.tag_no + ',';
                });
                this.$post('/student/tag%5Cclear_and_set_item_tag',{
                    target_type: 1,
                    tag_nos: str,
                    target_no: this.target_no
                },resp=> {
                    if(resp.code == 1) {
                        this.$message({
                            type: 'success',
                            message: '添加成功'
                        });
                        this.mergeDialogVisible = !this.mergeDialogVisible;
                    } else if (resp.code == 0) {
                        this.$message({
                            type: 'waring',
                            message: resp.msg
                        });
                    }
                });
            } else {
                this.$post('/student/tag%5Cclear_and_set_item_tag',{
                    target_type: 1,
                    tag_nos: '',
                    target_no: this.target_no
                },resp=> {
                    if(resp.code == 1) {
                        this.$message({
                            type: 'success',
                            message: '添加成功'
                        });
                        this.mergeDialogVisible = !this.mergeDialogVisible;
                    } else if (resp.code == 0) {
                        this.$message({
                            type: 'waring',
                            message: resp.msg
                        });
                    }
                });
            }
        },

        fnBeforeColse (done) {
            this.fnLabelCancel();
        },

        /**
        * 取消打标签
         */
        fnLabelCancel () {
            this.$confirm('是否取消?', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.mergeDialogVisible = !this.mergeDialogVisible;
            });
        },

        //回车
        handleLabelEnter (e) {
            if (this.label.length > 0) {
                this.ruleFormLabel.tag = this.label;
                this.centerDialogVisible = !this.centerDialogVisible;
                this.fnSelectType('user');
            } else {
                return;
            }
        },

        /**
         * 获取分组数据
         */
        fnSearchLabel () {
            this.$post('/student/tag_group%5Cget_simple_list', {
                target_type: 1,
                keyword: this.ruleFormLabel.label
            }, resp=> {
                if (resp.code == 1) {
                    if (resp.data.list.length > 0) {
                        this.ificationLabelList = resp.data.list;
                    }
                } else if (resp.code == 0) {
                    this.$message({
                        type: 'waring',
                        message: resp.msg
                    });
                }
            });
        },

        /**
         * 选择类型
         */
        fnSelectType (type) {
            if (type == 'user') {
                this.ruleFormLabel.type = 1;
                this.restaurantsLabel = [];
                this.fnSearchLabel();
            }
        },

        handleSelectLabel(item) {
            this.ruleFormLabel.label = item;
        },

        /**
         * 弹窗保存新增标签
         */
        submitFormLabel(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$post('/student/tag%5Cadd', {
                        target_type: 1,
                        group_no: this.ruleFormLabel.label,
                        name: this.ruleFormLabel.tag
                    }, resp => {
                        if (resp.code == 1) {
                            this.$message({
                                type: 'success',
                                message: '添加成功'
                            });
                            let label = {
                                name: this.ruleFormLabel.tag,
                                tag_no: resp.data['tag_no']
                            };

                            this.labelTagList.push(label);
                            this.label = this.ruleFormLabel.tag;
                            this.labelList.push(label.name);
                            this.fnGetDefaultLabel('');
                            this.centerDialogVisible = !this.centerDialogVisible;
                        } else if (resp.code == 0) {
                            this.$message({
                                type: 'waring',
                                message: resp.msg
                            });
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        /**
         * 删除标签
         */
        handleClose (tag,index) {
            this.labelList.splice(this.labelList.indexOf(tag), 1);
            this.labelTagList.splice(this.labelList.indexOf(tag), 1);
        },

        /**
         * 点击添加标签
         */
        fnGetLabel (tag) {
            this.labelList.push(tag.name);
            this.labelTagList.push(tag);
        },
        /**
         * 设置表单header
         */
        setHeader () {
            this.$store.commit('SET_HEADER', [{
                title: "APP后台",
            },
            {
                title: '社交'
            },
            {
                title: "用户列表"
            }]
            );
        },

        /**
         * 获取已开通学校列表
         */
        getSchoolList () {
            this.$post('/student/forum%5Cget_school_list', {
            }, resp => {
                if (resp.code == 1) {
                    let list = [];
                    let foum = [];

                    resp.data.list.map(item => {
                        list.push({
                            value: item.school_id,
                            label: item.school_name
                        });
                        foum.push({
                            value: item.forum_no,
                            label: item.school_name
                        });
                    });

                    this.forumList = this.forumList.concat(foum);
                    this.optionSchool = this.optionSchool.concat(list);
                    this.schoolList = this.schoolList.concat(list);
                }
            });
        },

        /**
         * 获取表格数据
         */
        getTableData (page) {
            this.$post('/student/forum_student%5Cget_list', {
                page_id: page || this.page.now_page,
                school_id: this.school,
                status: this.status,
                keyword_student_id: this.keyword_student_id
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * 编辑学校数据
         */
        submitEditForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$post('/student/forum_student%5Cchange_student', {
                        student_no: this.changeStudent['student_no'],
                        school_id: this.ruleForm.school_name
                    }, resp => {
                        if (resp.code == 1) {
                            this.showEditDialog = !this.showEditDialog;
                            this.getTableData(1);
                            this.$message({
                                type: 'success',
                                message: '操作成功!'
                            });
                        } else if (resp.code == 0) {
                            this.$message({
                                type: 'warning',
                                message: resp.msg
                            });
                        }
                    });

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        /**
         * 编辑学校名称
         */
        fnEditSchool (row) {
            this.$confirm('慎重考虑是否修改?', '提示', {
                confirmButtonText: '修改',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const school_name = row.school_name;

                this.$set(this.ruleForm, 'school_name', school_name);
                this.showEditDialog = !this.showEditDialog;
                this.changeStudent['student_no'] = row.student_no;

                this.schoolList.map(item => {
                    if (item.label == school_name) {
                        this.school_id = item.value;
                    }
                    return;
                });

            }).catch((error) => {
                console.log('error' + error);
            });
        },

        /**
         * 提交
         */
        submitForbidden(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$post('/student/forum_student%5Cforbid', {
                        student_no: this.forbidList['student_no'],
                        forbid: this.forbidList['forbid'],
                        day: this.ruleForm.forbidden_time,
                        forum_no: this.forum_no
                    }, resp => {
                        if (resp.code == 1) {
                            this.$message({
                                type: 'success',
                                message: '操作成功!'
                            });
                            this.showForbidden = !this.showForbidden;
                            this.getTableData(1);
                        } else if (resp.code == 0) {
                            this.$message({
                                type: 'warning',
                                message: resp.msg
                            });
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        /**
         * 禁言/取消禁言
         */
        fnForbidden (row) {
            let forbid = row.forbid;
            let school_name = row.school_name;


            this.forumList.map((item,index)=>{
                if(item.label == school_name) {
                    this.forum_no = item.value;
                }
                return;
            });


            forbid = forbid == 1 ? forbid = 0 : forbid = 1;
            this.forbidList = {
                student_no: row.student_no,
                forbid: forbid
            };

            if(forbid == 1) {
                this.showForbidden = !this.showForbidden;
            } else if (forbid == 0) {
                this.$confirm('是否要取消禁言?', '提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$post('/student/forum_student%5Cforbid', {
                        student_no: row.student_no,
                        forbid: forbid,
                        forum_no: this.forum_no,
                        day: ""
                    }, resp => {
                        if (resp.code == 1) {
                            this.$message({
                                type: 'success',
                                message: '操作成功!'
                            });
                            this.$set(row, 'forbid', forbid);
                            this.getTableData(1);
                        } else if (resp.code == 0) {
                            this.$message({
                                type: 'warning',
                                message: resp.msg
                            });
                        }
                    });
                });
            }
        },

        /**
         * 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
    .container {
        background-color: #fff;
        padding: 15px;
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        .header {
            margin-bottom: 20px;
            position: relative;
            display: flex;
            align-items: center;
            .header-title {
                color: #606266;
                margin-right: 8px;
                white-space: nowrap;
            }
            .header-right {
                display: flex;
                margin-left: 30px;
                align-items: center;
                margin-right: 20px;
            }
        }
        .curse-forb {
            color: rgb(64, 158, 255);
            cursor: pointer;
        }
        .user-number {
            width: 280px;
        }
        .school-wrap {
            display: flex;
            align-items: center;
            cursor: pointer;
            .school-spliter {
                width: 1px;
                height: 12px;
                background: rgba(235, 235, 235, 1);
                margin: 0 10px;
            }
            .btn-school {
                font-size: 14px;
                line-height: 1;
                color: #ccc;
                &:hover {
                    color: #20a0ff;
                }
            }
        }
        .pagination-wrapper {
            padding-top: 10px;
            .el-pagination {
                float: right;
                padding: 0;
                background-color: transparent;
            }
        }
        .dialog-footer {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .school-name {
            display: inline-block;
            width: 150px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
    //打标签
     .content-dialog {
        //  padding-bottom: 10px;
        .dialog-footer {
            width: 100%;
            display: flex;
            justify-content: center;
        }
    }
    .label-input {
      width: 100%;
    }
    .label-button {
        width: 57px;
        border-left: none;
    }
    .label-searchTitle {
        display: flex;
        align-items: center;
    }
    .label {
        margin: 15px 0 0px 0;
        .el-tag {
            margin-right: 10px;
            margin-bottom: 15px;
            cursor: pointer;
        }
        .button-new-tag {
            margin-left: 10px;
            height: 24px;
            line-height: 24px;
            padding-top: 0;
            padding-bottom: 0;
        }
    }
    .label-tips {
        height: 160px;
        width: 100%;
        color: #606266;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .label-default{
        max-height: 400px;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 4px;
            border-radius: 10px;
        }
        .label-cont {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
        }
        .label-title {
            font-size: 14px;
            color: #3F454B;
            margin-top: 30px;
            margin-bottom: 15px;
        }
        .label-refresh {
            font-size: 13px;
            color: #88909C;
        }
        .el-tag {
            margin-right: 10px !important;
            margin-bottom: 15px !important;
            cursor: pointer;
        }
    }
</style>
<style lang="less">
    .containerUser .el-table__body-wrapper .el-table__body .el-table__row td {
        border-right: none;
    }
    .containerUser .el-table__header-wrapper .el-table__header .has-gutter tr th {
        border-right: none;
    }
</style>